import React from 'react'
import { useTranslation } from 'react-i18next';
import './home-ipad.scss'
import Nav from 'components/Nav/Nav';
import Footer from 'components/Footer/Footer';
const adorn = require('assets/home/adorn@2x.png')
const lightning = require('assets/home/lightning@2x.png')
const smiley = require('assets/home/smiley@2x.png')
const people = require('assets/home/people@2x.png')
const contactUs = require('assets/home/contact-us@2x.png')
const contactUsLogo = require('assets/home/contact-us-logo@2x.png')
const appStore = require('assets/home/appStore@2x.png')
const googlePlay = require('assets/home/googlePlay@2x.png')
const uploadBtn = require('assets/home/contactUs-btn-ipad@2x.png')
const featureDetailBg = require('assets/home/feature-detail-bg@2x.png')
function HomeIpad() {
    const { t, i18n } = useTranslation();
    const enLanguage = i18n.language === 'en' ? true : false; // 英文 另外样式

    const anchorEvent = (anchorName: string) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    return (
        <div className={enLanguage ? 'homePage-ipad ipadEnTxtStyle' : 'homePage-ipad'}>
            {/* 头部 */}
            <header>
                <Nav anchorEvent={anchorEvent} />
                <hgroup>
                    <div className='banner-p1'>
                        {
                            t('bannerTitle1')
                        }
                    </div>
                    <div className='banner-p2'>
                        {
                            t('bannerTitle2')
                        }
                    </div>
                </hgroup>
            </header>
            {/* 主体 */}
            <main>
                {/* 介绍 */}
                <ul className='explanation-box'>
                    <li>
                        <div className='explanation-head'>
                            <div className='explanation-head-img'>
                                <img src={lightning} alt="" />
                            </div>
                            <img className='explanation-head-adorn' src={adorn} alt="点缀" />
                            <div className='explanation-head-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureIntuitiveTitle")
                                    }
                                </span>
                            </div>
                        </div>
                        <p>
                            {
                                t("featureIntuitiveTxt")
                            }

                        </p>
                    </li>
                    <li>
                        <div className='explanation-head'>
                            <div className='explanation-head-img'>
                                <img src={smiley} alt="" />
                            </div>
                            <img className='explanation-head-adorn' src={adorn} alt="点缀" />
                            <div className='explanation-head-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureInterestingTitle")
                                    }
                                </span>
                            </div>
                        </div>
                        <p>
                            {
                                t("featureInterestingTxt")
                            }

                        </p></li>
                    <li>
                        <div className='explanation-head'>
                            <div className='explanation-head-img'>
                                <img src={people} alt="" />
                            </div>
                            <img className='explanation-head-adorn' src={adorn} alt="点缀" />
                            <div className='explanation-head-title'>
                                <img src={featureDetailBg} alt="" />
                                <span>
                                    {
                                        t("featureCooperationTitle")
                                    }
                                </span>
                            </div>
                        </div>
                        <p>
                            {
                                t("featureCooperationTxt")
                            }

                        </p>
                    </li>
                </ul>

                {/* 联系我们 */}
                <section className='contact-us-box' id="contactUs">
                    <div className='contact-us-bg'>
                        <img src={contactUs} alt="背景" />
                        <img src={contactUsLogo} alt="logo" />
                        <img src={adorn} alt="点缀" />
                        <img src={adorn} alt="点缀" />
                        <img src={adorn} alt="点缀" />
                    </div>
                    <div className='contact-us-txt'>
                        <p>
                            {
                                t('downloadTitle')
                            }
                        </p>
                        <button className='uploadBtn-ipad'>
                            <img src={uploadBtn} className='btn-bg' alt="背景" />
                            <img src={appStore} className='btn-icon' alt="AppStore" />
                            <span className='btn-txt'>
                                AppStore
                            </span>
                        </button>
                        <button className='uploadBtn-ipad'>
                            <img src={uploadBtn} className='btn-bg' alt="背景" />
                            <img src={googlePlay} className='btn-icon googlePlay' alt="googlePlay" />

                            <span className='btn-txt google-txt'>
                                Goole Play
                            </span>
                        </button>

                    </div>
                </section>

            </main>
            {/* 页脚 */}
            <Footer />
        </div>
    )
}

export default HomeIpad
